<template>
  <div id="logo"
    class="logo-wrapper verifying"
    @click="openContent"
  ></div>
  <!--
  <div class="dialogue-box">
    <div class="dialogue-content">
      <h1>标题: {{ title }}</h1>
      <p>文章: {{ article }}</p>
    </div>
  </div>
  -->
  <Modal
    v-model="showModel"
    :title="title"
    @on-ok="ok"
    @on-cancel="cancel">
    <p>{{ article }}</p>
  </Modal>
</template>
<script>
import { getPageContent } from "@/services/task.js";
export default {
  name: "ContentApp",
  data() {
    return {
      showModel: false,
      title: '默认标题',
      article: '默认内容'
    }
  },
  methods: {
    //通过后端爬取，要求登陆也支持爬取
    openContent() {
      this.title = this.getTextFromSelector('div.sKHSJ')
      this.article = this.getTextFromSelector('div._18p7x')
      this.showModel = true
      chrome.runtime.sendMessage({
          greeting: "请求background返回cookie",
          type: "content-script"},
        function (response) {
          console.log('pageUrl:' + response.pageUrl + ',cookie:' + response.cookie)
          let param = {pageUrl: response.pageUrl,cookie: response.cookie}
          getPageContent(param).then((res) => {
            console.log(res.data)
          })
        })
    },
    getTextFromSelector(Selector) {
      const element = document.querySelector(Selector);
      return element ? element.innerText : "";
    }
  },
};
</script>

<style lang="less" scoped>
  .dialogue-box {
    position: fixed; /* 使div固定在顶部 */
    top: 0;
    width: 100%; /* 使div横跨整个屏幕 */
    background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
    z-index: 1000; /* 确保div在其他内容之上 */
  }

  .dialogue-content {
    padding: 10px; /* 内边距 */
    color: white; /* 文字颜色 */
  }
  .logo-wrapper {
    position: fixed;
    z-index: 1001;
    left: 90%;
    top: 80%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 83px;
    height: 83px;
  }
  .logo-wrapper.verifying {
    background-image: url(chrome-extension://__MSG_@@extension_id__/assets/images/logo.gif);
  }
  .logo-wrapper.noVerify {
    background-image: url(chrome-extension://__MSG_@@extension_id__/assets/images/logo.png);
  }

</style>
